<template>
    <div v-if="isRouterAlive">
        <el-dialog v-model="previewArticleDialogFormVisible" title="预览文章" width="70%" draggable
            @close="previewArticleCloseDialog(false)">
            <!-- 文章内容 -->
            <div v-highlight v-html="articleMain" class="article">

            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="previewArticleCloseDialog(false)">退出预览</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {
    reactive,
    ref,
    toRefs,
    nextTick,
    watch
} from 'vue'

type Props = {
    previewArticleDialogFormVisible?: string | boolean,
    valueHtml?: string | boolean,
}
const props = withDefaults(defineProps<Props>(), {
    previewArticleDialogFormVisible: false,
    valueHtml: '',
})
const emit = defineEmits(['onPreviewArticleCloseDialog'])
watch(() => [props.previewArticleDialogFormVisible,props.valueHtml], (newval,oldval) => {
    state.previewArticleDialogFormVisible = newval[0]
    state.articleMain = newval[1]
})
const state = reactive({
    previewArticleDialogFormVisible: props.previewArticleDialogFormVisible,
    articleMain: props.valueHtml,
    isRouterAlive: true,
})
const { previewArticleDialogFormVisible, articleMain, isRouterAlive } = toRefs(state)
// 局部组件刷新
const previewArticleCloseDialog = (visible: Boolean) => {
    // 关闭窗口
    emit("onPreviewArticleCloseDialog", visible);
    // 删除组件
    state.isRouterAlive = false;
    nextTick(() => {
        // 重新渲染组件
        state.isRouterAlive = true;
    });
};

</script>

<style scoped></style>